<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>21-flex布局实例 - 好用的全屏居中布局结构</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background-position: 50% bottom;
	background-image: url(images/06.jpg);
}
.center {
	background-color: rgba(255,255,255,0.48);
	width: 450px;
	border-radius: 10px;
	height: 400px;
}
.box {
	width: 800px;
}
.flex {
	display: flex;
}
.column {
	flex-direction: column;
}
.ai-c{
		align-items: center;
	}
.jc-c{
		justify-content: center;
	}
.mt-10 {
	margin-top: 10px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mr-10 {
	margin-right: 10px;
}
.ml-10 {
	margin-left: 10px;
}
.flex.jc-c.ai-c {
	height: 100vh;
}
</style>
</head>

<body>
<div class="flex jc-c ai-c">
  <div class="center">此处为新 div 标签的内</div>
</div>
</body>
</html>
